<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-model常用来获取表单数据，实现视图和数据的双向绑定，v-bind是强制单向绑定，视图改变并不会使数据改变 -->

      <input type="checkbox" value="香蕉" v-model="likefurit" />香蕉
      <input type="checkbox" value="猕猴桃" v-model="likefurit" />猕猴桃
      <input type="checkbox" value="苹果" v-model="likefurit" />苹果
      <input type="checkbox" value="凤梨" v-model="likefurit" />凤梨

      <!-- 单选 -->
      <input type="radio" v-model="isSunday" />今天是星期天吗

      <!-- v-model的修饰符
      lazy：实现change事件的效果,光标移出才获取表但单中的内容
      number：只读取数字，遇到非数字就会停止读取
      trim:清除内容首尾的空格
      -->
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            // 获取多个数据初始化数据时用数组，单个数据就用布尔值
            likefurit: [],
            isSunday: false,
          };
        },
      });
    </script>
  </body>
</html>
